<template>
  <div class>
    <tableComponents
      :isShow="false"
      :isHaveAdd="false"
      :isHaveExport="false"
      :isHavePagination="false"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list"
          stripe
          v-loading="loading"
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column prop="sort" label="排序" min-width="80" sortable :sort-method="sorta">
            <template slot-scope="scope">
              <el-input
                @change="sortNew(scope.$index,scope.row)"
                v-model.number="scope.row.sort"
                autocomplete="off"
                size="small"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="支付名称" min-width="300">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>

          <el-table-column label="支付标识" min-width="200">
            <template slot-scope="scope">{{ scope.row.iden }}</template>
          </el-table-column>

          <el-table-column label="是否开通" min-width="200">
            <template slot-scope="scope">
              <el-switch
                class="zdySwith"
                :width="82"
                v-model="scope.row.show"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="on"
                inactive-text="off"
                active-value="1"
                @change="handleSwitch($event,scope.row.id)"
                inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                type="primary"
                size="mini"
                @click="showEditDialog(scope.row.id)"
              >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
    <PayConfigEdit @parent="reload" :show.sync="myshow" :payId="payId"></PayConfigEdit>
  </div>
</template>
<script>
import PayConfigEdit from "@/components/config/addpay.vue";
export default {
  data() {
    return {
      loading: false,
      list: [],
      myshow: false,
      payId: ""
    };
  },
  components: {
    PayConfigEdit
  },
  methods: {
    sorta(a, b) {
      return b - a;
    },
    sortNew(index, row) {
      var params = {};
      params = row;
      this.$api.getConfig.paySave(params).then(res => {
        if (res.data.code == 200 && res.data.result != null) {
          this.list.sort(this.compare1("sort"));
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    compare1(prop) {
      return function(obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
          val1 = Number(val1);
          val2 = Number(val2);
        }
        if (val1 > val2) {
          return -1;
        } else if (val1 < val2) {
          return 1;
        } else {
          return 0;
        }
      };
    },
    getNewsAll(page) {
      this.loading = true;
      var data = { cate_id: "", page: page };
      this.$api.getConfig.payLists(data).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
          this.list.sort(this.compare1("sort"));
        }
        this.loading = false;
      });
    },
    handleSwitch(val, id) {
      var params = {};
      params["id"] = id;
      val == true ? (params["show"] = 1) : (params["show"] = 0);
      this.$api.getConfig.payChangeShow(params).then(res => {
        if (res.data.code == 400) {
          this.getNewsAll();
        }
      });
    },
    showEditDialog(id) {
      this.myshow = true;
      this.loading = false;
      this.payId = id;
    },
    reload() {
      this.getNewsAll();
    }
  },
  created() {
    this.getNewsAll();
  },
  computed: {
    getAdminuserList() {
      return this.$store.state.newsList;
    }
  },
  watch: {
    getAdminuserList(obj) {
      this.list = obj;
    }
  }
};
</script>

<style lang="less" scoped>
thead > tr > th {
  height: 45px;
  line-height: 45px;
}
td,
th {
  border: 1px solid #e1e3e4;
  font-size: 12px;
}
th {
  background: #f8f8f8;
  font-weight: normal;
  color: #323437;
}
td {
  height: 75px;
  color: #000;
}
.caozuo {
  padding-left: 50px;
}
.pl {
  padding-left: 15px;
}
.chkBox {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 18px;
  background: #fff;
}
.aBtn_1 {
  padding: 10px;
}
</style>
